<template>
	<view>
		<view class="public-title">
			<text class="top-title" v-if="index == 0">待入住...</text>
			<text class="top-title" v-if="index == 1">已入住...</text>
			<text class="top-title" v-if="index == 2">已完成...</text>
		</view>

		<view class="come_go u-margin-left-30 u-margin-right-30">
			<view class="u-flex u-row-between">
				<text class="come_go_label u-font-30">入离日期</text>
				<view class="u-font-30 u-flex">
					<text>{{$u.timeFormat(orderInfo.start_time , 'mm月dd日')}}</text>
					<text> 至 </text>
					<text>{{$u.timeFormat(orderInfo.end_time , 'mm月dd日')}}</text>
				</view>
			</view>
		</view>



		<view class="order-info u-margin-left-30 u-margin-right-30 u-margin-top-30">
			<u-image width="100%" height="355rpx" duration="300" :border-radius='10'
				:src="orderInfo.room_info.house_img" :fade='true'>
				<u-loading slot="loading"></u-loading>
			</u-image>

			<view class="u-padding-30">
				<view class="u-fle ">
					<text class="house_name">{{orderInfo.room_info.house_name}}</text>
					<text class="hinfo_name u-margin-left-30">{{orderInfo.room_info.hinfo_name}}</text>
				</view>
				<view class="">
					<text class="price">¥{{orderInfo.price}}</text>
					<text class="pre_price">（保证金{{orderInfo.pre_price}}）</text>
				</view>
			</view>
		</view>
		<view class="order-info u-margin-left-30 u-margin-right-30 u-margin-top-30">
			<view class="u-flex u-padding-20">
				<text class="user_label">用户姓名:</text>
				<text class="userinfo_text u-margin-left-20">{{orderInfo.user.username}}</text>
			</view>
			<view class="u-flex u-padding-20" @click="makePhoneCall(orderInfo.user.phone)">
				<text class="user_label">手机号:</text>
				<text class="userinfo_text u-margin-left-20 u-margin-right-30">{{orderInfo.user.phone}}</text>
				<u-icon label="拨打电话" size="40" name="phone"></u-icon>
			</view>
			<view class="u-flex u-padding-20">
				<text class="user_label">身份证号:</text>
				<text class="userinfo_text u-margin-left-20">{{orderInfo.user.card}}</text>
			</view>
		</view>
		<!-- <view v-if="index == 0" class="pay_button u-padding-right-30 u-padding-left-30 u-flex ">
			<u-button shape="circle" size="default" :ripple="true" type='warning' class="u-flex-1" @click="pay">立即支付</u-button>
		</view> -->
		<u-toast ref="uToast" :icon='false' />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: 0,
				id: '',
				orderInfo: {}, // 
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.index = options.index;
			this.init()
		},
		methods: {
			makePhoneCall(phoneNumber) {
				uni.makePhoneCall({
				    phoneNumber: phoneNumber
				});
			} ,
			
			async pay() {
				let orderInfo = await this.$u.api.repay({
					id: this.orderInfo.id,
				});
				if (orderInfo.code == 1) {
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: orderInfo.info.timeStamp.toString(),
						nonceStr: orderInfo.info.nonceStr,
						package: orderInfo.info.package,
						signType: orderInfo.info.signType,
						paySign: orderInfo.info.paySign,
						success: res => {
							console.log('success:' + JSON.stringify(res));
						},
						fail: err => {
							console.log('fail:' + JSON.stringify(err));
						}
					});
				} else {
					this.$refs.uToast.show({
						title: "订单信息有误，请联系管理员",
						type: 'warning',
						position: 'bottom',
					})
				}
			},
			init() {
				this.$u.api.business_orderInfo({
					order_id: this.id * 1
				}).then(res => {
					this.orderInfo = res.info;
					// console.log(this.orderInfo);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user_label {
		width: 150rpx;
		display: block;
	}

	.pay_button {
		position: fixed;
		bottom: 35rpx;
		width: 750rpx;
		height: 98rpx;
	}

	.pre_price {
		color: #999;
	}

	.price {
		font-weight: 700;
		font-size: 30rpx;
		color: #ff9900;
	}

	.house_name {
		font-weight: 700;
		font-size: 34rpx;
	}

	.order-info {
		background-color: #f4f4f5;
		border-radius: 10rpx;
		// padding: 30rpx;
	}

	.come_go_label {
		color: #000000;
		font-weight: 700;
	}

	.come_go {
		background-color: #f4f4f5;
		border-radius: 10rpx;
		padding: 30rpx;
	}

	.top-title {
		font-size: 36rpx;
		font-weight: 700;
		color: #000000;

	}

	.public-title {
		padding-left: 30rpx;
		padding-top: 20rpx;
		padding-bottom: 30rpx;
	}
</style>
